<template >
  <fieldset>
    <legend>{{isLogin ? "内容界面" :"登入界面"}}</legend>
  
    <div class="content" v-if="isLogin">
        <h1>列表展示</h1>
        <button @click="getList">获取列表数据</button>
        <button @click="isLogin=false">退出登录</button>
        <h2>昵称:
            <a href="">{{userInfo.city}}</a>
            <li v-for="item in lists" :key="item._id">
            <b>{{item.name}}</b>
            <button v-has:read="permissionBtns">查看</button>
            <button v-has:edit="permissionBtns">修改</button>
            <button v-has:delete="permissionBtns">删除</button>
            <button v-has:add="permissionBtns">增加</button>
            <!-- permissionBtns用户权限， read edit delete  add需要的权限-->
        </li>
        </h2>
        <ul>
            <li>按钮鉴权</li>
        </ul>
    </div>
    <!-- 登入界面 -->
    <div id="login" v-else>
        <h1>登陆界面</h1>
      <label for="username"> 账号:</label>
      <input type="text" id="username" v-model="username"/>
      <br />

      <label for="password"> 密码:</label>
      <input type="text" id="password" v-model="password" @keydown.enter="login" />
      <br />
      <button @click="login">登陆</button>
    </div>
    <!-- 内容展示页 -->

   
  </fieldset>
</template>



<script>
const getListApi=()=>{
    return fetch("http://chst.vip/students/getstulist?count=8",{
        method:"get",
        headers: {
            authorization: sessionStorage.getItem("user-token"),
        },
    })
    .then((body) => body.json())
     .catch((err )=> err.toString());
}

const loginApi = (params={}) =>{
    return fetch('http://chst.vip/users/login',{
        method: "post",
        headers: {
            'content-type':'application/json',
        },
    body: JSON.stringify(params),
    
    })
     .then((body) => body.json())
     .catch((err )=> err.toString());
};

   

export default{

    data () {
        return {
        isLogin: false,
        username:"",
        password:"",
        userInfo:{},
        lists:[],
        PermissionBtns:[],

        }
    },
    
    methods:{
        async login(){
            let res = await loginApi({
                username: this.username,
                password: this.password
            });
            console.log(res);
            
            if(res.state){
                this.isLogin=true;
                this.userInfo=res.userInfo;
                sessionStorage.setItem("user-token",res.token)
                // 给permissionBtns赋值
                this.permissionBtns=res.permission.buttons;
                this.getList()
            }else{
                alert(res.msg)
            }
        },
        // 获取列表
      async  getList(){
          let res =await getListApi()
            if(res.state){
                this.lists=res.data;
            }else{
                alert(res.msg);
            }
        }
    },
    directives:{
        has:{
        inserted(el,binding){
            console.log(el);
            console.log(binding);
            // el.disabled=true

         let role=binding.arg;//按钮需要的权限
         let userRole=binding.value;//用户的权限
          let hasRole= userRole.includes(role)
          if(!hasRole){
            // 无权限禁用
            // el.disabled=true//禁用
            el.parentNode.removeChild(el) //移除
          }
             


        }

    }}
}


</script>




<style>
ul{
    list-style: none;
}
li{
    list-style: none;
}

</style>